<template>
  <Page class="bg-[#f5f9fc] min-h-screen pb-[120rpx]">
    <!-- 顶部导航 -->
    <view class="bg-gradient-to-r from-[#2196F3] to-[#1976D2] text-white px-[24rpx] py-[24rpx] sticky top-0 z-[1000] shadow-md flex items-center justify-between">
      <view class="w-[48rpx] h-[48rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-[28rpx] cursor-pointer" @click="goBack">
        <IconFont name="arrow-left" />
      </view>
      <view class="flex-1 text-center text-[32rpx] font-bold">任务详情</view>
      <view class="w-[48rpx] h-[48rpx] rounded-full bg-[rgba(255,255,255,0.2)] flex items-center justify-center text-[28rpx] cursor-pointer">
        <IconFont name="question-circle" />
      </view>
    </view>

    <!-- 任务信息卡片 -->
    <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx] mx-[24rpx] mt-[24rpx] border-l-[8rpx] border-l-[#2196F3]">
      <view class="text-[32rpx] font-bold mb-[16rpx] text-[#222]">企业宣传海报设计</view>
      <view class="flex justify-between mb-[20rpx] pb-[20rpx] border-b border-[#E0E0E0]">
        <view class="flex flex-col">
          <view class="text-[20rpx] text-[#546E7A] mb-[4rpx]">任务编号</view>
          <view class="text-[24rpx] font-bold">TSK20250712001</view>
        </view>
        <view class="flex flex-col">
          <view class="text-[20rpx] text-[#546E7A] mb-[4rpx]">总金额</view>
          <view class="text-[24rpx] font-bold text-[#F44336]">¥1,500.00</view>
        </view>
        <view class="flex flex-col">
          <view class="text-[20rpx] text-[#546E7A] mb-[4rpx]">当前状态</view>
          <view class="text-[24rpx] font-bold text-[#F44336]">纠纷处理中</view>
        </view>
      </view>
      <view class="flex justify-between mt-[16rpx]">
        <view class="flex items-center">
          <view class="w-[48rpx] h-[48rpx] rounded-full bg-[#E3F2FD] text-[#2196F3] font-bold flex items-center justify-center mr-[12rpx] text-[24rpx]">发</view>
          <view class="flex flex-col">
            <view class="text-[20rpx] text-[#546E7A]">发布方</view>
            <view class="text-[24rpx] font-bold">李经理</view>
          </view>
        </view>
        <view class="flex items-center">
          <view class="w-[48rpx] h-[48rpx] rounded-full bg-[#E3F2FD] text-[#2196F3] font-bold flex items-center justify-center mr-[12rpx] text-[24rpx]">执</view>
          <view class="flex flex-col">
            <view class="text-[20rpx] text-[#546E7A]">执行方</view>
            <view class="text-[24rpx] font-bold">张设计师</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 阶段进度 -->
    <view class="mx-[24rpx] mt-[32rpx]">
      <view class="text-[28rpx] font-bold mb-[20rpx] pl-[12rpx] border-l-[8rpx] border-l-[#2196F3]">任务阶段与结算</view>
      <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx]">
        <view v-for="(stage, idx) in stages" :key="idx" class="flex py-[24rpx] border-b border-[#E0E0E0] last:border-b-0">
          <view :class="['w-[18rpx] h-[48rpx] rounded-full flex items-center justify-center mr-[20rpx] text-[28rpx]', stage.status === 'completed' ? 'bg-[#4CAF50] text-white' : stage.status === 'current-disputed' ? 'bg-[#F44336] text-white' : 'bg-[#90A4AE] text-white']">
            <IconFont :name="stage.icon" />
          </view>
          <view class="flex-1">
            <view class="text-[24rpx] font-bold mb-[4rpx]">{{ stage.title }}</view>
            <view class="text-[22rpx] text-[#546E7A] mb-[8rpx]">{{ stage.desc }}</view>
            <view class="text-[22rpx] font-bold" :class="stage.status === 'completed' ? 'text-[#4CAF50]' : stage.status === 'current-disputed' ? 'text-[#F44336]' : 'text-[#2196F3]'">{{ stage.amount }}</view>
            <view v-if="stage.action" class="mt-[12rpx]">
              <nut-button size="small" plain type="primary" class="rounded-[20rpx] text-[22rpx] px-[24rpx]">{{ stage.action }}</nut-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="flex justify-center gap-x-6 mt-[32rpx]">
      <nut-button type="primary" class="rounded-2xl text-[30rpx] px-[48rpx] bg-[#165DFF]" @click="handleActionClick('我已完工')">我已完工</nut-button>
      <nut-button type="success" class="rounded-2xl text-[30rpx] px-[48rpx] bg-[#165DFF]/80" @click="handleActionClick('验收完工')">验收完工</nut-button>
      <nut-button type="danger" class="rounded-2xl text-[30rpx] px-[48rpx] bg-[#FF4D4F]" @click="handleActionClick('我有异议')">我有异议</nut-button>
    </view>

    <!-- 纠纷处理区域 -->
    <!-- <view class="mx-[24rpx] mt-[32rpx]">
      <view class="text-[28rpx] font-bold mb-[20rpx] pl-[12rpx] border-l-[8rpx] border-l-[#2196F3]">纠纷处理</view>
      <view class="bg-white rounded-[24rpx] shadow-md p-[32rpx]">
        <view class="flex items-center p-[20rpx] bg-[#fff0f0] rounded-[16rpx] text-[#F44336] mb-[24rpx]">
          <IconFont name="exclamation-triangle" class="text-[32rpx] mr-[12rpx]" />
          <view class="text-[24rpx]">执行方对初稿设计阶段提出异议，交易金额已冻结</view>
        </view>
        <view class="mb-[24rpx]">
          <view class="text-[24rpx] font-bold mb-[8rpx]">异议原因</view>
          <view class="bg-[#f9f9f9] rounded-[12rpx] p-[20rpx] text-[22rpx] leading-[1.6]">发布方要求进行第三次大幅修改，超出了任务约定的修改范围（原约定为两次小幅修改）。执行方认为这属于额外工作，应另行计费或增加报酬。</view>
        </view>
        <view class="mb-[24rpx]">
          <view class="text-[24rpx] font-bold mb-[8rpx]">相关证据</view>
          <view class="grid grid-cols-3 gap-[16rpx]">
            <view class="h-[88rpx] rounded-[12rpx] bg-[#E3F2FD] flex items-center justify-center text-[40rpx] text-[#2196F3] cursor-pointer" @click="showEvidence('平台聊天记录')">
              <IconFont name="comments" />
            </view>
            <view class="h-[88rpx] rounded-[12rpx] bg-[#E8F5E9] flex items-center justify-center text-[40rpx] text-[#07C160] cursor-pointer" @click="showEvidence('微信沟通截图')">
              <IconFont name="weixin" />
            </view>
            <view class="h-[88rpx] rounded-[12rpx] bg-[#FFF8E1] flex items-center justify-center text-[40rpx] text-[#FF9800] cursor-pointer" @click="showEvidence('原始需求合同')">
              <IconFont name="file-contract" />
            </view>
          </view>
        </view>
        <view class="flex flex-col gap-y-[24rpx] mt-[24rpx]">
          <view class="bg-[#f9f9f9] rounded-[16rpx] p-[24rpx] border-l-[8rpx] border-l-[#2196F3]">
            <view class="flex items-center mb-[8rpx]">
              <IconFont name="comments" class="text-[28rpx] mr-[8rpx] text-[#2196F3]" />
              <view class="text-[24rpx] font-bold">双方协商解决</view>
            </view>
            <view class="text-[22rpx] text-[#546E7A] mb-[12rpx]">平台鼓励双方通过沟通协商解决纠纷。您可以使用内置聊天功能或已有的沟通记录继续协商，达成一致后点击“协商解决”按钮。</view>
            <nut-button type="primary" block class="rounded-[20rpx] text-[24rpx]" @click="openChat">打开协商聊天</nut-button>
          </view>
          <view class="bg-[#f9f9f9] rounded-[16rpx] p-[24rpx] border-l-[8rpx] border-l-[#FF9800]">
            <view class="flex items-center mb-[8rpx]">
              <IconFont name="gavel" class="text-[28rpx] mr-[8rpx] text-[#FF9800]" />
              <view class="text-[24rpx] font-bold">申请平台介入</view>
            </view>
            <view class="text-[22rpx] text-[#546E7A] mb-[12rpx]">如果双方无法达成一致，可以申请平台官方介入仲裁。请提供充分的证据材料，平台将在3个工作日内做出裁决。</view>
            <nut-button type="warning" block class="rounded-[20rpx] text-[24rpx]" @click="applyArbitration">申请平台仲裁</nut-button>
          </view>
        </view>
      </view>
    </view>

    <nut-popup v-model:visible="showArbitrationModal" position="center" round class="p-[0] bg-transparent">
        <view class="bg-white rounded-[32rpx] p-[40rpx] w-[600rpx] max-w-[90vw] text-center relative">
          <view class="absolute top-[24rpx] right-[24rpx] w-[48rpx] h-[48rpx] rounded-full bg-[#f5f5f5] flex items-center justify-center text-[28rpx] cursor-pointer" @click="showArbitrationModal = false">
            <IconFont name="times" />
          </view>
          <view class="w-[88rpx] h-[88rpx] rounded-full bg-[#fff0f0] flex items-center justify-center mx-auto mb-[24rpx] text-[48rpx] text-[#F44336]">
            <IconFont name="exclamation" />
          </view>
          <view class="text-[32rpx] font-bold text-[#F44336] mb-[16rpx]">异议申请已提交</view>
          <view class="text-[26rpx] text-[#666] mb-[24rpx]">我们已收到您的异议申请，平台将立即采取以下措施：</view>
          <view class="bg-[#fff0f0] p-[24rpx] rounded-[16rpx] mb-[24rpx] text-left text-[24rpx] text-[#F44336]">
            <view class="flex items-center mb-[12rpx]"><IconFont name="lock" class="mr-[12rpx]" /> 冻结当前阶段交易资金</view>
            <view class="flex items-center mb-[12rpx]"><IconFont name="headset" class="mr-[12rpx]" /> 客服将在24小时内联系双方</view>
            <view class="flex items-center"><IconFont name="hourglass-half" class="mr-[12rpx]" /> 纠纷处理期间暂停任务进度</view>
          </view>
          <view class="text-[24rpx] text-[#666] mb-[32rpx]">请准备好相关沟通记录作为证据，平台客服会通过注册手机号与您联系。</view>
          <nut-button type="primary" block class="h-[64rpx] text-[28rpx] font-bold rounded-[20rpx]" @click="showArbitrationModal = false">确认</nut-button>
        </view>
    </nut-popup> -->

    <!-- 底部操作栏 -->
    <!-- <view class="fixed bottom-0 left-0 w-full bg-white p-[24rpx_32rpx] box-border shadow-md flex justify-between items-center h-[120rpx] z-[1000]">
      <nut-button type="success" class="flex-1 mr-[16rpx] rounded-[20rpx] text-[28rpx] font-bold h-[72rpx]" @click="resolveDispute">
        <IconFont name="handshake" class="mr-[8rpx]" /> 协商解决
      </nut-button>
      <nut-button type="danger" class="flex-1 ml-[16rpx] rounded-[20rpx] text-[28rpx] font-bold h-[72rpx]" @click="insistDispute">
        <IconFont name="balance-scale" class="mr-[8rpx]" /> 坚持申诉
      </nut-button>
    </view> -->
  </Page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro, { showToast } from '@tarojs/taro'

const showArbitrationModal = ref(false)
const stages = [
  {
    title: '需求确认阶段',
    desc: '双方确认设计需求、风格和交付标准',
    amount: '已结算: ¥300.00',
    status: 'completed',
    icon: 'check',
  },
  {
    title: '初稿设计阶段',
    desc: '设计师提交初稿，客户提出修改意见',
    amount: '待结算: ¥600.00',
    status: 'current-disputed',
    icon: 'exclamation',
    action: '查看交付内容',
  },
  {
    title: '最终交付阶段',
    desc: '完成修改并交付最终源文件',
    amount: '待结算: ¥600.00',
    status: 'pending',
    icon: 'lock',
  },
]

function goBack() {
  // 返回上一页
  history.back()
}
function showEvidence(type: string) {
  showToast({ title: `查看证据: ${type}`, icon: 'none' })
}
function openChat() {
  // showToast({ title: '打开协商聊天室，双方可以继续沟通解决纠纷', icon: 'none' })
  Taro.navigateTo({
    url:'/pages/message/message'
  })
}
function applyArbitration() {
  showArbitrationModal.value = true
}
function resolveDispute() {
  showToast({ title: '纠纷已解决！资金已按协商方案结算。', icon: 'success' })
}
function insistDispute() {
  showToast({ title: '已提交仲裁申请，平台将在3个工作日内处理。', icon: 'success' })
}
function handleActionClick(action: string) {
  if (action === '我已完工') {
    showToast({ title: '我已完工', icon: 'success' })
  } else if (action === '验收完工') {
    showToast({ title: '验收完工', icon: 'success' })
  } else if (action === '我有异议') {
    Taro.navigateTo({
      url: '/pages/webs/dispute'
    })
  }
}
</script>